<template>
  <div class="view-container">
<div class="wrapper">
  <div class="Logo-Title">纺织供应链</div>
  <span class="Logo-sub">深度整合上下游资源，服务纺织行业全产业链，<br/>推动产业转型升级</span>
</div>
<div class="wrapper-white">
  <div class="top-Title">纺织全产业链服务平台</div>
  <div class="top-image">
    <img width="100%" height="100%" fit="cover"
      src="https://oss.cloudcpc.com/a79ade3366703cff85e3ffe7343c2ec6.png" />
  </div>
  <div class="top-image-1">
    <van-image width="100%" height="100%" fit="cover"
      src="https://oss.cloudcpc.com/cc4f137f9b49396cb9a86cf91098a9c0.png" />
  </div>
  <div class="top-image-2">
    <van-image width="100%" height="100%" fit="cover"
      src="https://oss.cloudcpc.com/920e5fdb9b8f3ab0b05bffd43c4d9b9f.png" />
  </div>
  <span
    class="top-sub">武汉纺友打造服务纺织业的全产业链平台，运用云计算、大数据、物联网、人工智能等先进互联网技术，为纺织上下游企业提供信息技术服务（MES/ERP/WMS等）、纺织原料/纱线/布匹/器材专备件采购、金融服务等产业链各环节的全方位服务，通过数字化的方式解决行业信息流、物流和资金流等经营问题，持续推动纺织产业的转型升级。</span>
</div>
<div class="tab-line"></div>
<div class="tab-white">

  <div v-for="(item) in tablist" :key="item.id" 
  class="tab-left" @click="changeView($event)" :id='item.id'
   :class="{'activeLi':tabid==item.id}">
   {{item.text}}
    <div class="tab-image">
      <van-image width="100%" height="100%" fit="cover"
        src="https://oss.cloudcpc.com/f25d7f0cc6713a958fa709316e916f7a.png" />
    </div>
  </div>
  <!-- <div class="tab-left" @click="changeView" id='1'
   :class="{'activeLi':istab}">
   采购中心
    <div class="tab-image">
      <van-image width="100%" height="100%" fit="cover"
        src="https://oss.cloudcpc.com/f25d7f0cc6713a958fa709316e916f7a.png" />
    </div>
  </div>
  <div class="tab-right" @click="changeView" id='2'
   style="color:{istab?'#18202D':'#0071FF'};">
   金融服务
  </div> -->
</div>

<!-- 采购中心 -->
<div v-if='tabid==0'>
  <div class="accurate-wrapper">
    <div class="accurate-title">供需精准匹配</div>
    <div class="accurate-image">
      <van-image width="100%" height="100%" fit="cover"
        src="https://oss.cloudcpc.com/da1111ded68c37faaf4d2f499db30bca.png" />
    </div>
    <div class="accurate-man">
      <van-image width="100%" height="100%" fit="cover"
        src="https://oss.cloudcpc.com/27ec93363d9a3a6bbde52c0b3d3901b6.png" />
    </div>
    <div class="accurate-list">
      <div class="accurate-list-num">
        <van-image width="100%" height="100%" fit="cover"
          src="https://oss.cloudcpc.com/93cccee99be6343980448ec1b151794e.png" />
      </div>
      <div class="accurate-list-sub">基于大数据，先进的图搜技术和全面的原料、纱线、面料参数数据库进行客群/商户双向精准定位，解决买卖双方的问题</div>
    </div>
  </div>
  <div class="accurate-list2">
    <div class="accurate-url2">
      <van-image width="100%" height="100%" fit="cover"
        src="https://oss.cloudcpc.com/c708c4d293c231de86306d9b5782d83d.png" />
    </div>
    <div class="accurate-list">
      <div class="accurate-list-num2">
        <van-image width="100%" height="100%" fit="cover"
          src="https://oss.cloudcpc.com/03c830c959d03e1ea5b82349b351ba85.png" />
      </div>
      <div class="accurate-list-sub">100+长期采购客户，800+纺织全产业链销售铁军遍布全国，拥有纺机商城、专备件商城、淘沙网等多家电商平台；线上线下双轮驱动集聚下游订单</div>
    </div>
    <!-- scroll-view scroll-x="true" -->
    <div style="width: 100%;overflow-x:auto" >
      <div class="accurate-view-item">
        <van-image width="100%" height="100%" fit="cover"
          src="https://oss.cloudcpc.com/95c39307bbd13b669e675e794eeeee2e.png" />
      </div>
    </div>
  </div>
  <div class="accurate-list3">
    <div class="accurate-list">
      <div class="accurate-list-num3">
        <van-image width="100%" height="100%" fit="cover"
          src="https://oss.cloudcpc.com/ee6979fa67b831f59b4b3362c041cc32.png" />
      </div>
      <div class="accurate-list-sub">平台根据企业产能、工艺、质量等精准匹配，将订单分配给入驻工厂、以产能共享的方式组织生产，改善客户服务，帮助企业获得成本和交期双重优势。</div>
    </div>
    <div class="accurate-title accurate-title2">优质源头 厂商直供</div>
    <span class="top-sub accurate3-sub">300+优质源头厂商，棉花、纱线、器材专备件等齐全供应。厂商直供、产能预售、活动促销等，降低采购成本</span>
    <div class="accurate-list-banner3">
      <van-image width="100%" height="100%" fit="cover"
        src="https://oss.cloudcpc.com/b4cb2daff8b83c669a3470a2b61d4293.png" />
    </div>
  </div>
  <div class="safe-wrapper">
    <div class="accurate-title safe-title">交易全程可控 省钱省心</div>
    <div class="safe-list wow fadeInUp">
      <div class="safe-list-back safeListTop">
        <div class="safe-list-txt">
          汇集各中小企业的采购需求，积小单成大单形成规模优势，获得议价权；从而降低中小企业采购成本。纺机专备件、生产原材料或纱线均适用企业集采。
        </div>
      </div>
      <div class="safe-list-img"
        style="background: url('https://oss.cloudcpc.com/a30f982db62539a2a943aab1ec337b40.png'); background-size: cover;">
        <span class="safe-list-img-txt">企业<br/>集采</span>
      </div>
    </div>
    <div class="safe-list safeListbot wow fadeInUp">
      <div class="safe-list-img safe-list-img2 "
        style="background: url('https://oss.cloudcpc.com/f5ce5c710ed93e4a820e37c75f05e8c1.png'); background-size: cover;">
        <span class="safe-list-img-txt">产能<br/>预售</span>
      </div>
      <div class="safe-list-back safe-list-back2">
        <div class="safe-list-txt">
          依托电商平台，提前将未来一段时间的产能以合理的市场价格进行预售。把需求聚沙成塔，将剩余产能化整为零实现销售。
        </div>
      </div>
    </div>
    <div class="safe-Down">
      <swiper ref="mySwiper" :options="swiperOption" class="swiperBox">
        <swiper-slide v-for="(item,index) in safeArr" :key="index">
          <div v-for="(divItem,divIndex) in item" :key="divIndex" class="itemDiv">
            <div class="bgImg">
              <img :src='divItem.url' alt="" srcset="">
              <div class="cirText">{{divItem.txt}}</div>
            </div>
            <div class="content">
              {{divItem.sub}}
            </div>
          </div>
        </swiper-slide>
        <div class="swiper-pagination" slot="pagination"></div>
      </swiper>
      <van-image class="image" width="100%" height="100%" fit="cover"
        src="https://oss.cloudcpc.com/42ea20fc50fa3424a0df765a492ab5ed.png" />
    </div>

     <!-- <div class="swiper-container banner-swiper">
        <div class="swiper-wrapper">
          <div class="swiper-slide" v-for="(item, index) in safeArr" :key="index">
             <div v-for="(child, index1) in safeArr" :key="index1">
            <div class="safe-Top-white">
              <div class="safe-Top-white-url" style="background: url('{{child.url}}'); background-size: cover;">
                <div class="safe-Top-white-txt"> {{child.txt}}</div>
              </div>
              <div class="safe-Top-white-sub"> {{child.sub}}</div>
            </div>
            </div>
          </div>
        </div>
      </div> -->


    <!-- <swiper class="safe-Top-swiper round-dot" indicator-dots="true" interval="5000" duration="500"
    indicator-color="rgba(62, 104, 255, 0.4)" indicator-active-color="#3E68FF">
      <swiper-item v-for="{{safeArr}}"  class="safe-Top-swiper-item">
        <div class="safe-Top-swiper-item" data-index='{{index}}'>
          <div v-for="{{safeArr[index]}}" v-for-item="child">
            <div class="safe-Top-white">
              <div class="safe-Top-white-url" style="background: url('{{child.url}}'); background-size: cover;">
                <div class="safe-Top-white-txt"> {{child.txt}}</div>
              </div>
              <div class="safe-Top-white-sub"> {{child.sub}}</div>
            </div>
          </div>
        </div>
      </swiper-item>
    </swiper> -->
  </div>
</div>
<div v-else>
  <div class="money-wrapper">
    <div class="accurate-title money-title">纺织企业的资金困境</div>
      <div class="money-view-item">
        <van-image width="100%" height="100%" fit="cover"
          src="https://oss.cloudcpc.com/4aeee820c07c3363a0029e099cbfb0fb.png" />
      </div>
      <span
    class="money-sub">纺织行业以中小企业为主。随着产品的迭代周期越来越短，季节波动性大，导致中小型纺织企业库存积压多，资金流转慢，在进行产品购买和销售时常常流动资金不足。对于有资金需求、有相应偿债能力的中小企业而言，供应链金融的出现将降低它们获取资金的门槛和成本。</span>
  </div>
  <div class="lowcost-wrapper">
    <div class="accurate-title lowcost-title">纺织企业的资金困境</div>
    <div class="lowcost-view-item">
        <van-image width="100%" height="100%" fit="cover"
          src="https://oss.cloudcpc.com/c002460e919836038a63f9b08a93511b.png" />
      </div>
      <span
    class="money-sub lowcost-sub">武汉纺友结合自主研发的MES、ERP、WMS等新一代信息管理系统，链接银行和金融机构，为下游的成品纱线、布匹交易提供智能集中仓储、供应链金融服务，为上游的纺织厂提供信息技术服务，从而打通上下游数据，形成产业链服务闭环。</span>
  </div>
  <div class="more-wrapper">
    <div class="accurate-title lowcost2-title">流程短 放款快 费率低</div>
    <div class="more-image">
        <van-image width="100%" height="100%" fit="cover"
          src="https://oss.cloudcpc.com/7b432317e65c32c5a87cbc77ffbaa62a.png" />
    </div>
    <div class="moreBox">
      <div v-for="(item,index) in moreArr" :key="index" class="wow fadeInUp"
        data-wow-duration="0.4s" :data-wow-delay="0.2+(index+1)/10+'s'" >
        <div class="more-list">
          <div class="more-url" :style="{marginLeft:item.left+'px'}">
            <van-image width="100%" height="100%" fit="cover"
            src="https://oss.cloudcpc.com/08b434c264013b3da70ea47a4ddc1921.png" />
          </div>
            <div class="more-list-sub">{{item.sub}}</div>
        </div>
      </div>
    </div>
    <span
    class="money-sub more-sub">将供应链上的相关企业作为一个整体，根据交易中构成的链条关系和行业特点设定融资方案，对供应链单个企业或上下游多个企业提供全面金融系统支撑。</span>
  </div>
  <div class="pattern-wrapper">
    <div class="pattern-wrapper-line"></div>
    <div class="accurate-title pattern-title">平台融资模式</div>
    
    <div class="pattern-list-back">
      <!-- animation="{{more_up1}}" -->
    <div class="pattern-list wow fadeInLeft">
      <div class="pattern-list-left">
        “供方融资”是面向电商平台卖方客户提供的挂牌资源融资服务，
        企业在电商平台完成挂牌后，可向平台金融中心在线申请融资，
        在客户的授信额度内，根据挂牌资源的总体估值向客户提供融资
        服务。客户可通过供方融资提前获取部分货款，并同步在电商平
        台销售货物。
      </div>
      <div class="pattern-list-right">
        <span class="pattern-list-right-title"> 供<br/>方<br/>融<br/>资</span>
      </div>
    </div>
    <!-- animation="{{more_up2}}" -->
    <div class="pattern-list pattern-list2 wow fadeInLeft">
      <div class="pattern-list-right2 pattern-list-right">
        <span class="pattern-list-right2-title pattern-list-right-title"> 买<br/>方<br/>融<br/>资</span>
      </div>
      <div class="pattern-list-left2">“买方融资”是平台提供的在线订单融资服务，企业客户在电商平台选定商品并下单成功后，向平台金融中心申请融资，平台在客户的授信额度内及时、定向放款给卖方，完成货款支付。</div>
    </div>
    <!-- animation="{{more_up3}}" -->
    <div class="pattern-list pattern-list3 wow fadeInLeft">
      <div class="pattern-list-left pattern-list-left3">棉纱厂将生产出来的棉纱直接运送到平台融资库锁货，获得70%的融资。棉纱厂的下游客户从融资库采购提货，采购资金先还取融资本金，余款返回棉纱厂。棉纱厂除支付利息外，还需支付仓储费和监管费。</div>
      <div class="pattern-list-right pattern-list-right3">
        <span class="pattern-list-right-title pattern-list-right3-title"> 仓<br/>库<br/>前<br/>移</span>
      </div>
    </div>
    <div class="pattern-down-image">
      <van-image width="100%" height="100%" fit="cover"
          src="https://oss.cloudcpc.com/07dfdbc16dc4307b84f47336a98aaad6.png" />
    </div>
    <div class="pattern-list-down">
      <div class="pattern-down-white">
        <div class="pattern-down-white-text">
          购机包销
       </div>
       <div class="pattern-down-white-sub">纺纱厂需要购置纺机时，可向平台申请首付30%购机，拿到机器后，交易平台可以包销生产的纱线。彻底解决纺纱厂购。</div>
      </div>
      <div class="pattern-down-white pattern-down-white2">
        <div class="pattern-down-white-text pattern-down-white-text2">
          仓单质押
       </div>
       <div class="pattern-down-white-sub">企业以交易平台融资清单内的货源为质押物，平台金融中心对企业质押的商品实行监管并予以资金融通。</div>
      </div>
    </div>
  </div>
  </div>
</div>
  </div>
</template>

<script>
import { WxShare } from '@/utils/share'
import { redirectUrl } from '@/utils/config'
import { WOW } from 'wowjs'

export default {
  data() {
    return {
      istab: true,
      index: 1,
      wrapperArr: [
        {
          url: 'https://oss.cloudcpc.com/35e39f1413a83dec99583b7abc9cc976.png',
          txt: '业务一键生成',
          sub: '客户一键生成项目、合同项目、合同一键生成生产计划生产订单一键生成预购、采购、调拨、入库,减少重复录入、繁琐操作、出错几率'
        },
        {
          url: 'https://oss.cloudcpc.com/70de03369eb73a01bcc98fb61304e1b9.png',
          txt: '流程无缝衔接',
          sub: '从客户、项目、报价、销售、合同、产品到生产、采购、库存、售后、维修、财务,全程一体化管理,数据实时同步解决信息滞后,反应迟钝问题'
        },
        {
          url: 'https://oss.cloudcpc.com/412f96f1ccb2353fa1051a477cc2bd77.png',
          txt: '流程灵活简捷',
          sub: '自定义字段、名称、编号、分类...自定义界面、导航、视图、模板,自定义业务流程、审批流程、工作流程...满足个性、特殊生产流程需求'
        }
      ],
      safeArr: [
        [
          {
            url: 'https://oss.cloudcpc.com/e04da627d39638af998ca11b15e5d224.png',
            txt: '竞价',
            sub: '供应商须选择现货资源投放到竞价区，买家以限时竞拍的方式购买纱线。'
          },
          {
            url: 'https://oss.cloudcpc.com/cbca949e3cf03f3ca7ed50956ec0c97f.png',
            txt: '实单求购',
            sub: '采购企业发布询价单，供应商在招标截止期内提供报价，采购商根据报价信息选择合适的供应商。'
          }
        ],
        [
          {
            url: 'https://oss.cloudcpc.com/5adbe16e08ba32d9b617e591a908bbbd.png',
            txt: '帮买',
            sub: '帮买是更快捷的求购方式，用户可一键上传求购清单；系统读取后按买家帮买需求将符合需求的现货实时推荐给买家。'
          },
          {
            url: 'https://oss.cloudcpc.com/d582dbfb4446369e9b9622062035fbc7.png',
            txt: '报价单',
            sub: '针对无法验证货源的纱线，允许卖家将纱线信息上传到“报价单”栏目，买家查看报价单，实现撮合交易。'
          }
        ]
      ],
      moreArr: [
        {
          left: 0,
          sub: '有效化解企业资金周转难题'
        },
        {
          left: 56,
          sub: '帮助企业快速打开市场'
        },
        {
          left: 76,
          sub: '提高原料议价能力'
        },
        {
          left: 76,
          sub: '降低原料、布料采购成本和采购周期'
        },
        {
          left: 56,
          sub: '降低仓储物流成本及一批商库存风险'
        },
        {
          left: 0,
          sub: '提升布料产业链各环节现金利用率'
        }
      ],
      data: {
        cover: '',
        name: '',
        overview: '',
        products: [],
        products_info: [],
        static_img: ''
      },
      iscolor: '',
      tablist: [
        {
          id: 0,
          text: '采购中心'
        },
        {
          id: 1,
          text: '金融服务'
        }
      ],
      tabid: 0,
      swiperOption: {
        pagination: '.swiper-pagination',
        // paginationClickable: true,
        // observer: true, // 修改swiper自己或子元素时，自动初始化swiper
        // observeParents: true, // 修改swiper的父元素时，自动初始化swiper
        loop: false,
        // autoplay: 4000,
        // autoplayDisableOnInteraction: false
      }
    }
  },
  mounted() {
    const { fullPath } = this.$route

    this.$nextTick(() => {
      let wow = new WOW({
        boxClass: 'wow', /// 动画元件css类（默认为wow）
        animateClass: 'animated', // 动画css类（默认为animated）
        offset: 0, // 到元素距离触发动画（当默认为0）
        mobile: true, // 在移动设备上触发动画（默认为true）
        live: true // 对异步加载的内容进行操作（默认为true）
      })
      // wow.start()
      wow.init()
    })

    // WxShare({
    //   title: '虚拟仿真',
    //   desc: '实施感知、智能决策、精准执行，助力企业数字化转型，加速各行业智造升级',
    //   link: `${redirectUrl}${fullPath}`,
    //   imgUrl: 'https://www.2025.net/share.png'
    // })

 var swiper1 = new Swiper('.banner-swiper', {
      autoplay: true,
      loop: true,
      effect: 'fade'
      // effect: 'fade',
      // fade: {
      //   crossFade: false,
      // }
    })
  },
  methods: {
    changeView(e){
      this.tabid = e.target.id
  },

  }
}
</script>
<style lang="scss" scoped>
@import './index';
</style>
<style lang="scss">
.swiper-container-horizontal .swiper-pagination{
  bottom: 50px;
  .swiper-pagination-bullet{
    width: 14px;
    height: 14px;
    background: #FFFFFF;
    border-radius: 50%;
    margin: 0px 11px;
  }
  .swiper-pagination-bullet:hover{
    cursor: pointer;
  }
  .swiper-pagination-bullet-active{
    width: 14px;
    height: 14px;
    background: linear-gradient(0deg, #0071FF 0%, #318CFF 100%);
    border-radius: 50%;
  }
}
</style>
